<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>全部商品</title>
		<link rel="stylesheet" href="../../css/mobile_reset.css">
		<link rel="stylesheet" href="../../css/mui.css">
		<link rel="stylesheet" href="../../css/all_goods/recommend_try.css">
		<link rel="stylesheet" href="../../css/footerNav_common.css">
		<link rel="stylesheet" href="../../css/all_goods/all_goods.css">
		<link rel="stylesheet" href="../../css/all_goods/top_nav.css">
		<script>

            (function () {
                document.addEventListener('DOMContentLoaded', function () {
                    var html = document.documentElement;
                    var windowWidth = html.clientWidth;
                    html.style.fontSize = windowWidth / 7.5 + 'px';
                    // 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
                }, false);


            })();

            // 这个7.5就是根据设计稿的横向宽度来确定的，假如你的设计稿是640
            // 那么 html.style.fontSize = windowWidth / 6.4 + 'px';
		</script>
	</head>

	<body>
	<div  id="offCanvasWrapper"  class="mui-off-canvas-wrap mui-draggable mui-slide-in">
		<!-- 侧滑导航根容器 -->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="content">
							<div class="type_selection">
								<div class="main">
									<h1>店铺类型</h1>
									<ul>
										<li><a class="main_active" href="javascript:void(0);">不限</a></li>
										<li><a href="javascript:void(0);">淘宝</a></li>
										<li><a href="javascript:void(0);">天猫</a></li>
									</ul>
								</div>
								<!--<div class="main">
									<h1>试用类型</h1>
									<ul>
										<li><a href="javascript:void(0);">不限</a></li>
										<li><a href="javascript:void(0);">普通试用</a></li>
										<li><a href="javascript:void(0);">兑换试用</a></li>
										<li><a href="javascript:void(0);">追赏试用</a></li>
									</ul>
								</div>-->
								<div class="main">
									<h1>邮费类型</h1>
									<ul>
										<li><a class="main_active" href="javascript:void(0);">不限</a></li>
										<li><a href="javascript:void(0);">包邮</a></li>
										<li><a href="javascript:void(0);">付邮</a></li>
									</ul>
								</div>
								<div class="main">
									<h1>试用数量</h1>
									<ul>
										<li><a class="main_active" href="javascript:void(0);">不限</a></li>
										<li><a href="javascript:void(0);">限量</a></li>
										<li><a href="javascript:void(0);">海量</a></li>
									</ul>
								</div>
								<div class="main">
									<h1>商品类型</h1>
									<ul>
										<li><a class="main_active" href="javascript:void(0);">不限</a></li>
										<li><a href="javascript:void(0);">高价值商品</a></li>
										<li><a href="javascript:void(0);">高中奖率商品</a></li>
										<li><a href="javascript:void(0);">新品</a></li>
									</ul>
								</div>
							</div>
							<p class="reset_finish">
								<input id="reset" type="button" value="重置">
								<input id="offCanvasHide" type="button" value="完成">
							</p>
						</div>
					</div>
				</div>
			</aside>
		<!--页面最顶部-->
			<div class="mui-inner-wrap">
				<div class="top_return">
					<p>
						<span><img src="../../images/all_goods/icon_return_default.png" alt=""></span>
						<span>全部商品</span>
						<span><img src="../../images/all_goods/nav_icon_search_default@2x.png" alt=""></span>
					</p>
				</div>
			<!-- 主页面内容容器 -->
				<div class="mui-content mui-scroll-wrapper section">
					<div class="mui-scroll">
						<!-- 主页面标题 -->
						<div class="mui-bar mui-bar-nav header">
							<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
								<div class="mui-scroll  category_navigation">
									<a class="mui-control-item ">
										<img src="../../images/all_goods/all_icon_all_default@2x.png" data-selected="all_icon_all_selected@2x.png" data-unselected='all_icon_all_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_woman_default@2x.png" data-selected="all_icon_woman_selected@2x.png" data-unselected='all_icon_woman_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_man_default@2x.png"  data-selected="all_icon_man_selected@2x.png" data-unselected='all_icon_man_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_skin_default@2x.png" data-selected="all_icon_skin_selected@2x.png" data-unselected='all_icon_skin_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_shoes_default@2x.png"  data-selected="all_icon_shoes_selected@2x.png" data-unselected='all_icon_shoes_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_safa_default@2x.png"  data-selected="all_icon_safa_selected@2x.png" data-unselected='all_icon_safa_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_camera_default@2x.png" data-selected="all_icon_camera_selected@2x.png" data-unselected='all_icon_camera_default@2x.png'  alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_baby_default@2x.png" data-selected="all_icon_baby_selected@2x.png" data-unselected='all_icon_baby_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_sport_default@2x.png" data-selected="all_icon_sport_selected@2x.png" data-unselected='all_icon_sport_default@2x.png' alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_water_default@2x.png"  data-selected="all_icon_water_selected@2x.png" data-unselected='all_icon_water_default@2x.png'  alt="">
									</a>
									<a class="mui-control-item">
										<img src="../../images/all_goods/all_icon_other_default@2x.png"  data-selected="all_icon_other_selected@2x.png" data-unselected='all_icon_other_default@2x.png' alt="">
									</a>
								</div>
							</div>
						</div>
						<div class="classify_nav">
							<ul>
								<li class="classify">
									<a class="classify_active" href="javascript:void(0);" >人气</a>
								</li>
								<li class="classify">
									<a href="javascript:void(0);" class="">上线时间</a>
								</li>
								<li class="classify">
									<a href="javascript:void(0);" class="">剩余分数</a>
								</li>
								<li class="classify">
									<a href="javascript:void(0);" class="">价格</a>
								</li>
								<li>
									<a id="offCanvasBtn"  class="">筛选</a>
								</li>
							</ul>
						</div>
						<!--分类精选-->
						<div class="recommend-try">
							<!--分类精选商品-->
							<div class="recommend-try-goods">
								<ul>
									<li>
										<a href="#">
											<img src="../../images/poster_bg_poster01_default@2x.png " />
										</a>
										<div class="goods-description">
											<p class="one">花谢花飞花满天，红消香断有谁怜。</p>
											<p class="two">
												<span>价值：<b>&yen;288.00</b></span>
												<span class="pinkage">包邮</span>
											</p>
											<p class="three">
												<span>限量：<b>10份</b></span>
												<span class="applyFor">已申请<b>1000份</b></span>
											</p>
										</div>
									</li>
									<li>
										<a href="#">
											<img src="../../images/poster_bg_poster01_default@2x.png " />
										</a>
										<div class="goods-description">
											<p class="one">花谢花飞花满天，红消香断有谁怜。</p>
											<p class="two">
												<span>价值：<b>&yen;288.00</b></span>
												<span class="pinkage">包邮</span>
											</p>
											<p class="three">
												<span>限量：<b>10份</b></span>
												<span class="applyFor">已申请<b>1000份</b></span>
											</p>
										</div>
									</li>
									<li>
									<a href="#">
										<img src="../../images/poster_bg_poster01_default@2x.png " />
									</a>
									<div class="goods-description">
										<p class="one">花谢花飞花满天，红消香断有谁怜。</p>
										<p class="two">
											<span>价值：<b>&yen;288.00</b></span>
											<span class="notPinkage">付邮</span>
										</p>
										<p class="three">
											<span>限量：<b>10份</b></span>
											<span class="applyFor">已申请<b>1000份</b></span>
										</p>
									</div>
								</li>
									<li>
										<a href="#">
											<img src="../../images/poster_bg_poster01_default@2x.png " />
										</a>
										<div class="goods-description">
											<p class="one">花谢花飞花满天，红消香断有谁怜。</p>
											<p class="two">
												<span>价值：<b>&yen;288.00</b></span>
												<span class="pinkage">包邮</span>
											</p>
											<p class="three">
												<span>限量：<b>10份</b></span>
												<span class="applyFor">已申请<b>1000份</b></span>
											</p>
										</div>
									</li>
									<li>
										<a href="#">
											<img src="../../images/poster_bg_poster01_default@2x.png " />
										</a>
										<div class="goods-description">
											<p class="one">花谢花飞花满天，红消香断有谁怜。</p>
											<p class="two">
												<span>价值：<b>&yen;288.00</b></span>
												<span class="notPinkage">付邮</span>
											</p>
											<p class="three">
												<span>限量：<b>10份</b></span>
												<span class="applyFor">已申请<b>1000份</b></span>
											</p>
										</div>
									</li>
									<li>
										<a href="#">
											<img src="../../images/poster_bg_poster01_default@2x.png " />
										</a>
										<div class="goods-description">
											<p class="one">花谢花飞花满天，红消香断有谁怜。</p>
											<p class="two">
												<span>价值：<b>&yen;288.00</b></span>
												<span class="pinkage">包邮</span>
											</p>
											<p class="three">
												<span>限量：<b>10份</b></span>
												<span class="applyFor">已申请<b>1000份</b></span>
											</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!--底部导航-->
				<!--<div class="mui-bar mui-bar-tab category_navigation">
					<a id="index"  class="nav mui-tab-item" href="index.html">
						<img src="../../images/bottom_icon_home_default@2x.png"
							 data-selected="bottom_icon_home_selected@2x.png" data-unselected="bottom_icon_home_default@2x.png"  alt=""><br>
						<span class="mui-tab-label">试客首页</span>
					</a>
					<a id="allGoods"  class="nav mui-tab-item mui-active " href="all_goods.html ">
						<img src="../../images/all_goods/bottom_icon_goods_default@2x.png"
							 data-selected="bottom_icon_goods_selected@2x.png" data-unselected="bottom_icon_goods_default@2x.png" alt=""><br>
						<span class="mui-tab-label">全部商品</span>
					</a>
					<a id="tryProgress" class="nav mui-tab-item" href="#">
						<img src="../../images/bottom_icon_progress_default@2x.png"
							 data-selected="bottom_icon_progress_selected@2x.png" data-unselected="bottom_icon_progress_default@2x.png" alt=""><br>
						<span class="mui-tab-label">试用进展</span>
					</a>
					<a  id="home" class="nav mui-tab-item" href="#">
						<img src="../../images/bottom_icon_personal_default@2x.png"
							 data-selected="bottom_icon_personal_selected@2x.png" data-unselected="bottom_icon_personal_default@2x.png" alt=""><br>
						<span class="mui-tab-label">个人中心</span>
					</a>
				</div>-->
				<!--遮罩层-->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
	</div>
	<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
	<script src="../../js/mui.js"></script>
	<script src="../../js/all_goods/all_goods.js"></script>
	<script>
           //    禁止屏幕旋转
            mui.plusReady(function () {
                plus.screen.lockOrientation("portrait-primary");
            });
			mui.init({
				swipeBack: false
			});

            var offCanvasWrapper = mui('#offCanvasWrapper');
            document.getElementById('offCanvasBtn').addEventListener('tap', function() {
                offCanvasWrapper.offCanvas('show');
            });
            document.getElementById('offCanvasHide').addEventListener('tap', function() {
                offCanvasWrapper.offCanvas('close');
            });
            window.onload = function(){
                mui('.mui-scroll-wrapper').scroll({
                    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
                });
            };
//    		取消禁止a标签的跳转
            mui('.mui-bar-tab').on('tap','a',function(){document.location.href=this.href;});
	</script>
	<script src="../../js/all_goods/index_tab.js"></script>
	</body>
</html>


















